<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .asd{
            width: 100px;
            height: 100px;
            background: #000;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="asd"></div>
</body>
</html>
<script>
    const type = {
        left:500,
        top:{
            target:400,//最大值
            init:100,//初始值
            inites:3//每次增加量
        },
        opacity: {
            target: 1,
            init: 0,
            inites: 0.01,
            tcpy: ''
        }
    }
    const asd = document.querySelector('.asd')
    
    function move(asd,type) {
        const cont = Object.entries(type)

        cont.forEach(([type1,type2]) => {

            // const targetDistance = typeof type2 === 'number'
            // ? type2
            // : type2.target;

            const targetDistance = type2?.target || type2

            if(typeof targetDistance !== 'number'){
                console.log('参数有误');
                return ;
            }else{
                console.log('无误');
            }

            let def = type2?.init || 0 
            const step = type2?.inites || 5
            const unit = type2?.tcpy ?? 'px'

            const ast = setInterval(() => {
                def += step;
                asd.style[type1] = def + unit
                if(def > targetDistance){
                    clearInterval(ast)
                }
            },16)
        })
    }
    asd.addEventListener('click',function () {
        move(asd,type)
    })
</script>